<template>
  <div class="SetupEntrance_main AddOrUpdate_main add_container">
    <div class="main_main">
      <el-tree
        ref="menu"
        class="tree-border"
        :data="menuOptions"
        show-checkbox
        node-key="menuId"
        :default-expanded-keys="defaultExpandedNodes"
      >
        <span slot-scope="{ node, data }" class="tree-node">
          <span class="node_name">{{ data.meta.title }}</span>
        </span>
      </el-tree>
    </div>
    <div class="main_bottom">
      <el-button @click.stop="backDefault">恢复默认</el-button>
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
import { backDefault, savePageSettings } from '@/api/common/common'
import { mapGetters } from 'vuex'
export default {
  name: 'SetupEntrance',
  props: {
    layerid: {},
    settingData: {}
  },
  computed: {
    ...mapGetters([
      'userId', 'permission_routes', 'all_routes'
    ])
  },
  data() {
    return {
      menuOptions: [],
      defaultExpandedNodes: []
    }
  },
  mounted() {
    this.menuOptions = this.$deepClone(this.all_routes)
    if (this.settingData.data) {
      const keys = []
      this.settingData.data.forEach(item => {
        keys.push(item.menuId)
      })
      this.$refs.menu.setCheckedKeys(keys)
      this.defaultExpandedNodes = keys
    }
  },
  methods: {
    // 提交
    onSubmit() {
      const selectedRows = this.$refs.menu.getCheckedNodes(true, false)
      console.log(selectedRows)
      if (selectedRows.length > 6) {
        this.$message({
          message: '最多设置6个快捷入口',
          type: 'warning'
        })
        return
      }
      const cacheData = []
      selectedRows.forEach(item => {
        cacheData.push({
          menuId: item.menuId,
          name: item.meta.title,
          icon: item.meta.icon,
          component: item.component
        })
      })
      const submitData = {}
      submitData.id = this.settingData.id
      submitData.userId = this.userId
      submitData.pageId = this.settingData.pageId
      const data = { data: cacheData }
      submitData.json = JSON.stringify(data)
      savePageSettings(submitData).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        setTimeout(() => {
          location.reload() // 直接刷新页面吧
        }, 1000)
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    backDefault() {
      backDefault({ userId: this.userId, pageId: this.settingData.pageId }).then(res => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        // this.$layer.close(this.layerid) // 关闭弹框
        // this.$parent.getPageSettings() // 调用父组件的方法

        location.reload() // 直接刷新页面吧
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-tree-node{
  //叶子节点显示复选框，其他节点不显示复选框
  .is-leaf~.el-checkbox .el-checkbox__inner {
    display: flex;
  }

  .el-checkbox__input>.el-checkbox__inner {
    display: none;
  }
}
.main_main{
  margin-left: 20px;
}
</style>
